import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export interface Template {
  id: string
  name: string
  category: 'basic' | 'social' | 'creative'
  width: number
  height: number
  thumbnail: string
  slots: Array<{
    x: number
    y: number
    width: number
    height: number
  }>
}

export interface ImageItem {
  id: string
  src: string
  x: number
  y: number
  width: number
  height: number
  rotation: number
  scaleX: number
  scaleY: number
  filters?: {
    brightness?: number
    contrast?: number
    saturation?: number
    blur?: number
  }
}

export interface CanvasSettings {
  width: number
  height: number
  backgroundColor: string
  padding: number
  borderRadius: number
  borderWidth: number
  borderColor: string
}

export const useEditorStore = defineStore('editor', () => {
  // 当前选中的模板
  const currentTemplate = ref<Template | null>(null)
  
  // 画布设置
  const canvasSettings = ref<CanvasSettings>({
    width: 800,
    height: 600,
    backgroundColor: '#ffffff',
    padding: 20,
    borderRadius: 0,
    borderWidth: 0,
    borderColor: '#000000'
  })
  
  // 图片列表
  const images = ref<ImageItem[]>([])
  
  // 当前选中的图片
  const selectedImageId = ref<string | null>(null)
  
  // 操作历史
  const history = ref<any[]>([])
  const historyIndex = ref(-1)
  
  // 计算属性
  const selectedImage = computed(() => 
    images.value.find(img => img.id === selectedImageId.value)
  )
  
  const canUndo = computed(() => historyIndex.value > 0)
  const canRedo = computed(() => historyIndex.value < history.value.length - 1)
  
  // 方法
  function setTemplate(template: Template) {
    currentTemplate.value = template
    canvasSettings.value.width = template.width
    canvasSettings.value.height = template.height
    saveState()
  }
  
  function addImage(imageData: Omit<ImageItem, 'id'>) {
    const newImage: ImageItem = {
      ...imageData,
      id: Date.now().toString()
    }
    images.value.push(newImage)
    selectedImageId.value = newImage.id
    saveState()
  }
  
  function updateImage(id: string, updates: Partial<ImageItem>) {
    const index = images.value.findIndex(img => img.id === id)
    if (index !== -1) {
      images.value[index] = { ...images.value[index], ...updates }
      saveState()
    }
  }
  
  function removeImage(id: string) {
    images.value = images.value.filter(img => img.id !== id)
    if (selectedImageId.value === id) {
      selectedImageId.value = null
    }
    saveState()
  }
  
  function selectImage(id: string | null) {
    selectedImageId.value = id
  }
  
  function updateCanvasSettings(updates: Partial<CanvasSettings>) {
    canvasSettings.value = { ...canvasSettings.value, ...updates }
    saveState()
  }
  
  function saveState() {
    const state = {
      template: currentTemplate.value,
      canvasSettings: { ...canvasSettings.value },
      images: [...images.value]
    }
    
    // 删除当前位置之后的历史记录
    history.value = history.value.slice(0, historyIndex.value + 1)
    history.value.push(state)
    historyIndex.value = history.value.length - 1
    
    // 限制历史记录数量
    if (history.value.length > 50) {
      history.value.shift()
      historyIndex.value--
    }
  }
  
  function undo() {
    if (canUndo.value) {
      historyIndex.value--
      restoreState(history.value[historyIndex.value])
    }
  }
  
  function redo() {
    if (canRedo.value) {
      historyIndex.value++
      restoreState(history.value[historyIndex.value])
    }
  }
  
  function restoreState(state: any) {
    currentTemplate.value = state.template
    canvasSettings.value = state.canvasSettings
    images.value = state.images
    selectedImageId.value = null
  }
  
  function clearCanvas() {
    images.value = []
    selectedImageId.value = null
    saveState()
  }
  
  function resetCanvas() {
    currentTemplate.value = null
    images.value = []
    selectedImageId.value = null
    canvasSettings.value = {
      width: 800,
      height: 600,
      backgroundColor: '#ffffff',
      padding: 20,
      borderRadius: 0,
      borderWidth: 0,
      borderColor: '#000000'
    }
    history.value = []
    historyIndex.value = -1
  }

  return {
    currentTemplate,
    canvasSettings,
    images,
    selectedImageId,
    selectedImage,
    canUndo,
    canRedo,
    setTemplate,
    addImage,
    updateImage,
    removeImage,
    selectImage,
    updateCanvasSettings,
    undo,
    redo,
    clearCanvas,
    resetCanvas,
    saveState
  }
})
